<template>
     <!-- 品牌分类 -->
        <div class="brand-kinds">
            <div class="title">
                <p>品牌分类</p>
            </div>
            <div class="brand-kinds-list">
                <div 
                class="list-content" 
                v-for="(item,index) in KindsArr"
                :key="index"
                >
                    <div class="list-circular" >
                        <img src="../../../../../assets/images/swiper3.jpg" alt="">
                    </div>
                    <div class="list-title">{{item}}</div>
                </div>
                
                
                
            </div>
        </div>
</template>

<script>
export default {
    name:'ListDetailsKinds',
    data(){
        return{

        }
    },
    props:{
        KindsArr:{
            type:Array,
            default:[]
        }
    }
}
</script>

<style lang='less' scoped>
    
.brand-kinds{
    width:100%;
    height: 232px;
    .title{
        width: 57px;
        height: 23px;
        line-height: 20px;
        text-align: center;
        font-family: Arial;
        margin: 13px auto 11px;
        p{
            color: rgba(16, 16, 16, 1);
            font-size: 14px;
        }
    }
    .brand-kinds-list{
        display: flex;
        flex-wrap: wrap;
        .list-content{
            flex:0 0 25%;
            height: 90px;
            text-align: center;
            margin-bottom: 5px;
        }
    }
}
.list-circular{
    width:54px;
    height: 54px;
    border-radius: 50%;
    margin: 0 auto;
}
.list-circular img{
    width:100%;
    height: 100%;
    border-radius: 50%;
}
.list-title{
    width: 40px;
    height: 23px;
    line-height: 23px;
    color: rgba(16, 16, 16, 1);
    font-family: Arial;
    margin: 4px auto 10px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    p{
        font-size: 12px;
    }
}
</style>
